<%--@elvariable id="pageCount" type=""--%>
<%--
  Created by IntelliJ IDEA.
  User: Natural-Pride
  Date: 2023/12/17
  Time: 11:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>天气查询网站</title>
    <link rel="icon" href="<c:url value="/img/icon.png"/>">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
            href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,800&display=swap"
            rel="stylesheet">
    <link rel="stylesheet" href="css/style.css"/>
</head>

<body onload="myFunction()">
<div id="loading"></div>
<%--天气插件--%>
<div id="he-plugin-simple"></div>
<div class="cont">
    <div class="one">
        <h1>🌦️ 城市天气查询 ☔️</h1>
    </div>
</div>

<%--搜索框--%>
<form action="WeatherSearchServlet" method="post" align="center">
    <div class="search" style="margin-top: 10px;margin-bottom: 10px">
        <a href="WeatherDisplayServlet?pageNum=1" style="float: left;margin-left: 0">首页</a>
        <input type="text" class="search-bar" name="cityName" placeholder="请输入您想要的城市天气"/>
        <button type="submit" value="搜索">
            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="2em" width="1.5em"
                 xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                      d="M10.442 10.442a1 1 0 011.415 0l3.85 3.85a1 1 0 01-1.414 1.415l-3.85-3.85a1 1 0 010-1.415z"
                      clip-rule="evenodd"></path>
                <path fill-rule="evenodd"
                      d="M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z"
                      clip-rule="evenodd"></path>
            </svg>
        </button>
        <a href="weatherListServlet" style="float: right">后台管理</a>
    </div>
</form>
<div>
    <div align="center" class="plan_box">
        <table width="90%" align="center" border="1" cellpadding="0">
            <tr>
                <td colspan="7" align="center" style="font-size: 20px">
                   <img src="icon/shishishuju.png" height="20px" width="20px" alt=""/>城市实时天气</td>
                <td colspan="5" align="center" style="font-size: 20px">
                    <img src="icon/tianqiyubao.png" height="20px" width="20px" alt=""/>
                    城市天气预报</td>
            </tr>
            <tr align="center" class="head" style="height: 45px ;font-size: 20px">
                <th><img src="icon/icon-test.png" height="20px" width="20px" alt=""/>️城市编码</th>
                <th><img src="icon/chengshimingcheng.png" height="20px" width="20px" alt=""/>城市名称</th>
                <th><img src="icon/tianqi.png" height="20px" width="20px" alt=""/>天气</th>
                <th><img src="icon/qiwen.png" height="20px" width="20px" alt=""/>气温 ℃</th>
                <th><img src="icon/fengli.png" height="20px" width="20px" alt=""/>风力</th>
                <th><img src="icon/fengxiang.png" height="20px" width="20px" alt=""/>风向</th>
                <th>🕑更新时间</th>
                <th><img src="icon/riqi.png" height="20px" width="20px" alt=""/>日期</th>
                <th><img src="icon/shishishuju.png" height="20px" width="20px" alt=""/>星期</th>
                <th>⛅天气</th>
                <th><img src="icon/zuigaoqiwen.png" height="20px" width="20px" alt=""/>最高温度</th>
                <th><img src="icon/zuidiqiwen.png" height="20px" width="20px" alt=""/>最低温度</th>
            </tr>
            <%--@elvariable id="weatherList" type="java.util.List"--%>
            <c:forEach items="${weatherList}" var="weather">
                <tr align="center">
                    <td>${weather.cityId}</td>
                    <td>${weather.city}</td>
                    <td>${weather.nowWeather}</td>
                    <td>${weather.nowTemp} ℃</td>
                    <td>${weather.nowWindClass}</td>
                    <td>${weather.nowWindDir}</td>
                    <td>${weather.nowUptime}</td>
                    <td>${weather.forecastDate}</td>
                    <td>${weather.forecastWeek}</td>
                    <td>${weather.forecastWeather}</td>
                    <td>${weather.forecastHigh} ℃</td>
                    <td>${weather.forecastLow} ℃</td>
                </tr>
            </c:forEach>
            <%--显示分页效果及页码切换--%>
            <td colspan="12" align="center">
                <%--显示首页效果--%>
                <%--@elvariable id="pageNum" type=""--%>
                <c:if test="${pageNum == 1}">
                    <label style="color: rgb(128,128,128)">首页</label>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <label style="color: rgb(128,128,128)">上一页</label>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                </c:if>
                <c:if test="${pageNum > 1}">
                    <a href="WeatherDisplayServlet?pageNum=1">首页</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="WeatherDisplayServlet?pageNum=${pageNum-1}">上一页</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                </c:if>
                <%--显示页码和总页数--%>
                当前第${pageNum}页/共${pageCount}页
                <%--显示下一页效和；尾页果--%>
                <c:if test="${pageNum < pageCount}">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="WeatherDisplayServlet?pageNum=${pageNum+1}">下一页</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="WeatherDisplayServlet?pageNum=${pageCount}">尾页</a>
                </c:if>
                <c:if test="${pageNum == pageCount}">
                    <label style="color: rgb(128,128,128)">下一页</label>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <label style="color: rgb(128,128,128)">尾页</label>
                </c:if>
            </td>
        </table>
    </div>

</div>
<script>
    var preloader = document.getElementById('loading');

    function myFunction() {
        preloader.style.display = 'none';
    }
</script>
<script>
    WIDGET = {
        "CONFIG": {
            "modules": "01243",
            "background": "1",
            "tmpColor": "FFFFFF",
            "tmpSize": "16",
            "cityColor": "FFFFFF",
            "citySize": "16",
            "aqiColor": "FFFFFF",
            "aqiSize": "18",
            "margin-top": "10px",
            "weatherIconSize": "24",
            "alertIconSize": "18",
            "padding": "10px 10px 10px 10px",
            "shadow": "2",
            "language": "auto",
            "borderRadius": "5",
            "fixed": "true",
            "vertical": "top",
            "horizontal": "left",
            "key": "20a0d38bd1f94f94ad0aafbe54043dab"
        }
    }
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
</body>
<footer align="center" style="margin-top: 10px">
    <p>Copyright &copy;2023  Natural-Pride. JavaWeb & WebDesign</p>
    <p>All rights reserved</p>
</footer>
</html>
